<!-- 自定义 tabbar 组件，接收业务属性 list 用于渲染 tab 项 -->
<template>
  <ul class="tabbar">
    <router-link
      tag="li"
      v-for="tabItem in list"
      :key="tabItem.pagePath"
      class="tabbar-item"
      :to="tabItem.pagePath"
    >
      <van-icon :name="tabItem.icon" size="24" />
      <span>{{ tabItem.text }}</span>
    </router-link>
  </ul>
</template>

<script>
export default {
  name: "Tabbar",
  data() {
    return {
      active: 0,
    };
  },
  props: {
    list: {
      type: Array,
      required: true,
    },
  },
};
</script>

<style lang="less" scoped>
.tabbar {
  display: flex;
  border-top: 1px solid #eaeaea;

  &-item {
    flex: 1;
    height: 50px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
  }

  .router-link-exact-active,
  .router-link-active {
    color: #1989fa;
  }
}
</style>
